
<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>视频预览</span>
      </div>
      
      <div v-if="videoInfo" class="video-container">
        <div class="video-player">
          <video
            :src="videoInfo.videoUrl"
            controls
            width="100%"
            height="400"
            style="max-width: 800px;"
          >
            您的浏览器不支持视频播放。
          </video>
        </div>
        
        <el-descriptions title="视频信息" :column="2" border class="video-info">
          <el-descriptions-item label="视频标题">{{ videoInfo.title }}</el-descriptions-item>
          <el-descriptions-item label="生成状态">
            <el-tag :type="getStatusType(videoInfo.status)">
              {{ getStatusText(videoInfo.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="文档标题">{{ videoInfo.documentTitle }}</el-descriptions-item>
          <el-descriptions-item label="生成时间">{{ videoInfo.createTime }}</el-descriptions-item>
          <el-descriptions-item label="视频时长">{{ formatDuration(videoInfo.duration) }}</el-descriptions-item>
          <el-descriptions-item label="文件大小">{{ formatFileSize(videoInfo.fileSize) }}</el-descriptions-item>
          <el-descriptions-item label="音色类型">{{ getVoiceTypeText(videoInfo.voiceType) }}</el-descriptions-item>
          <el-descriptions-item label="语速/音调">
            {{ videoInfo.speechRate }} / {{ videoInfo.pitch }}
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="video-actions">
          <el-button type="primary" @click="downloadVideo" icon="el-icon-download">
            下载视频
          </el-button>
          <el-button @click="goBack" icon="el-icon-back">
            返回列表
          </el-button>
        </div>
      </div>
      
      <div v-else class="loading-container">
        <i class="el-icon-loading"></i>
        <p>正在加载视频信息...</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getVideoById, downloadVideo } from '@/api/video'

export default {
  name: 'VideoPreview',
  data() {
    return {
      videoId: this.$route.params.id,
      videoInfo: null,
      loading: false
    }
  },
  created() {
    this.loadVideoInfo()
  },
  methods: {
    loadVideoInfo() {
      this.loading = true
      getVideoById(this.videoId).then(response => {
        this.videoInfo = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getStatusType(status) {
      const statusMap = {
        'completed': 'success',
        'processing': 'warning',
        'failed': 'danger',
        'pending': 'info'
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        'completed': '生成成功',
        'processing': '生成中',
        'failed': '生成失败',
        'pending': '待处理'
      }
      return statusMap[status] || '未知状态'
    },
    getVoiceTypeText(voiceType) {
      const voiceMap = {
        'zh-CN-XiaoxiaoNeural': '晓晓（女声）',
        'zh-CN-YunxiNeural': '云希（男声）',
        'zh-CN-YunjianNeural': '云健（男声）',
        'zh-CN-XiaoyiNeural': '晓艺（女声）'
      }
      return voiceMap[voiceType] || voiceType
    },
    formatDuration(seconds) {
      if (!seconds) return '0秒'
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      let result = ''
      if (hours > 0) result += hours + '小时'
      if (minutes > 0) result += minutes + '分钟'
      if (secs > 0) result += secs + '秒'
      return result || '0秒'
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    downloadVideo() {
      this.$message.info('正在准备下载...')
      downloadVideo(this.videoId).then(response => {
        const blob = new Blob([response.data])
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = this.videoInfo.title + '.mp4'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        this.$message.success('下载成功！')
      }).catch(() => {
        this.$message.error('下载失败，请重试')
      })
    },
    goBack() {
      this.$router.push('/video/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.video-container {
  text-align: center;
}

.video-player {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.video-info {
  margin: 30px auto;
  max-width: 800px;
}

.video-actions {
  margin-top: 30px;
  text-align: center;
}

.loading-container {
  text-align: center;
  padding: 50px;
  
  i {
    font-size: 48px;
    color: #409EFF;
  }
  
  p {
    margin-top: 20px;
    color: #666;
  }
}
</style>
